<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div id="app" class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">注册</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-6">
                            <input type="email" v-model.trim="username" @input="show(),checkAll()" class="form-control" id="inputEmail3" 
                                placeholder="姓名">
                        </div>
                        <div v-show="flag" class="col-sm-4 form-control-static text-danger" >
                            用户名必须是8-12位字符
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" v-model.trim="password" @input="show1(),checkAll()" class="form-control" id="inputPassword3" 
                                placeholder="密码">
                        </div>
                        <div  v-show="flag1" class="col-sm-4 form-control-static text-danger" >
                            密码必须是8-12位字符
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" v-model="gender" name="inlineRadioOptions" id="inlineRadio1" 
                                    value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" v-model="gender" name="inlineRadioOptions" id="inlineRadio2" 
                                    value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <!--类名： text-success： 绿色  ； text-danger：红色 -->
                            <div class="checkbox " class="text-success">
                                <label :class="danger">
                                    <input type="checkbox" v-model="flag3"  @click="danxuan(),checkAll()"> 是否同意条款
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">城市</label>
                        <div class="col-sm-6">
                            <select class="form-control" v-model="citys"  @change="city(),checkAll()"  value="男">
                                <option value="">--请选择城市--</option>
                                <option value="深圳">深圳</option>
                                <option value="广东">广东</option>
                                <option value="上海">上海</option>
                            </select>

                        </div>
                        <div v-show="flag2" class="col-sm-4 text-danger form-control-static" >
                            请选择城市
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <!-- 不能点击 加类名 disabled -->
                            <button type="submit" :class="Submit" 
                                >注册</button>
                            <button @click="clear" type="submit" :class="reset" 
                                >重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script src="../day0523/static/vue.js"></script>
<script>
// 复习 ：逻辑搞清楚 
// 注册作业 
const vm = new Vue({
     el:"#app",
     data:{
        Submit:"btn btn-success disabled",
        reset:"btn btn-danger disabled",
        danger:"text-danger",//判断条款是否勾选
        username:"",
        password:"",
        gender:"男",
        flag:true,
        flag1:true,
        flag2:true,
        flag3:false,
        citys:"",
     },
     methods:{
        show(){   
             if(this.username.length>=8&&this.username.length<=12){
                this.flag=false;
             }else{
                this.flag=true;
             }
         },
        show1(){   
             if(this.password.length>=8&&this.password.length<=12){
                this.flag1=false;
             }else{
                this.flag1=true;
             }
         },
        //城市判断
        city(){
             if(this.citys){
                this.flag2=false
             }else{
                this.flag2=true
             }
         },
         //单选同意条款
        danxuan(){
             this.flag3=!this.flag3;
             if(this.flag3){
                this.danger="text-success"
             }else{
                this.danger="text-danger"
             }
         },
        checkAll(){
            if(this.flag==false&&this.flag1==false&&this.flag2==false&&this.flag3==true){
                this.Submit="btn btn-success";
            }else{
                this.Submit="btn btn-success disabled";
            }
            if(this.flag==false||this.flag1==false||this.flag2==false||this.flag3==true){
                this.reset="btn btn-danger";
            }else{
                this.reset="btn btn-danger disabled";
            }
         },
        clear(){
            this.danger="text-danger";//判断条款是否勾选
            this.username="";
            this.password="";
            this.flag=true;
            this.flag1=true;
            this.flag2=true;
            this.flag3=false;
            this.citys="";
         }
     }
 })
</script>
</html>

